<script lang="ts" setup>
  import { computed, ref } from "vue";
  import { getColor, getSize } from "../utils";

  interface ContainerProps {
    direction?: string;
    justify?: string;
    padding?: string;
    gap?: number;
    align?: string;
    width?: string | number;
    height?: string | number;
    minHeight?: string | number;
    bgColor?: string;
    wrap?: boolean;
    radius?: string;
  }

  const props = withDefaults(defineProps<ContainerProps>(), {
    direction: "vertical",
    wrap: false,
  });

  const containerRef = ref<HTMLElement>();

  const justifyContentMap: { [index: string]: string } = {
    start: "flex-start",
    end: "flex-end",
    center: "center",
    between: "space-between",
  };

  const alignItemMap: { [index: string]: string } = {
    start: "flex-start",
    end: "flex-end",
    center: "center",
  };

  const styles = computed<any>(() => {
    const { direction, wrap, justify, align, width, height, minHeight, bgColor, padding, gap, radius } = props;

    return {
      flexWrap: wrap ? "wrap" : undefined,
      justifyContent: justify ? justifyContentMap[justify] : undefined,
      alignItems: align ? alignItemMap[align] : undefined,
      width: getSize(width),
      height: getSize(height),
      minHeight: getSize(minHeight),
      background: getColor(bgColor),
      padding,
      flexDirection: direction === "vertical" ? "column" : "row",
      gap: gap ? `${gap}px` : undefined,
      borderRadius: radius,
    };
  });

  defineExpose({
    getInstance() {
      containerRef.value;
    },
  });
</script>

<template>
  <div class="umi-container" ref="containerRef" :style="styles">
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
  .umi-container {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
</style>
